<template>
  <form>
    <div class="input-text clearFix">
      <label for="phone"></label>
      <input
        id="phone"
        type="text"
        v-model="phone"
        placeholder="请输入手机号"
      />
      <span class="error-msg">错误提示信息</span>
    </div>
    <div class="input-text clearFix">
      <label for="pwd" class="pwd"></label>
      <input
        id="pwd"
        type="password"
        v-model="password"
        placeholder="请输入密码"
        autocomplete="off"
      />
      <span class="error-msg">错误提示信息</span>
    </div>
    <div class="setting clearFix">
      <label class="checkbox inline">
        <input name="m1" type="checkbox" value="2" />
        自动登录
      </label>
      <span class="forget">忘记密码？</span>
    </div>
    <button class="btn" @click.prevent="userLogin">登&nbsp;&nbsp;录</button>
  </form>
</template>

<script setup>
import { ref } from "vue";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";

const $store = useStore();
const $router = useRouter();
const $route = useRoute();
let phone = ref("");
let password = ref("");

const userLogin = async () => {
  try {
    let res =
      phone &&
      password &&
      (await $store.dispatch("login/userLogin", { phone, password }));
    if (res) {
      //登录后看路由组件在有query码，有跳query 没有跳home
      let toPath = $route.query.redirect || "/home";
      $router.push(toPath);
    }
  } catch (error) {
    console.log(error);
  }
};
</script>

<style scoped lang="less">
form {
  margin: 10px 0 18px 0;
  font-size: 12px;
  line-height: 18px;
  .input-text {
    margin-bottom: 35px;
    position: relative;
    label {
      float: left;
      width: 37px;
      height: 40px;
      border: 1px solid #ccc;
      background: url(./images/icons.png) no-repeat -10px -195px;
      box-sizing: border-box;
      border-radius: 6px 0 0 6px;
    }
    .pwd {
      background-position: -72px -195px;
    }
    input {
      width: 302px;
      height: 40px;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-left: none;
      float: left;
      padding: 6px 10px;
      font-size: 14px;
      border-radius: 0 6px 6px 0;
      outline: none;
    }

    .error-msg {
      margin-top: 6px;
      position: absolute;
      top: 100%;
      left: 40px;
      color: #3498db;
    }
  }
  .setting {
    label {
      float: left;
    }
    .forget {
      float: right;
    }
  }
  .btn {
    background-color: #3498db;
    padding: 6px;
    border-radius: 6px;
    font-size: 16px;
    font-family: 微软雅黑;
    word-spacing: 6px;
    border: 1px solid #3498db;
    color: #fff;
    width: 100%;
    height: 36px;
    margin-top: 20px;
    outline: none;
  }
}
</style>
